<template>
	<div class="layuimini-container">
		<div class="layuimini-main">
			<div class='app'>
			  <main class='project'>
			    <div class='project-info'>
			      <h1>模板使用</h1>
			      <div class='project-participants'>
			        <button class='project-participants__add' @click="dialogVisibleAdd=true">Add Participant</button>
			        </div>
			    </div>
			    <div class='project-tasks'>
			      <div class='project-column' v-for="res in pageList">
			        <div class='project-column-heading'>
			          <h2 class='project-column-heading__title'>{{res.title}}</h2>
					</div>
			        <div class='task' draggable='true' @click="pageSkip(page)" v-for="page in res.pages">
			          <div class='task__tags' >
						  <span :class="[res.id=='1' ? 'task__tag--illustration' : res.id=='2' ? 'task__tag--design': res.id=='3' ? 'task__tag--copyright':'task__tag--editing']" class='task__tag '>{{page.name}}</span>
						 <div @click.stop="sss">
							  <el-dropdown  @command="pageCommand">
							     <span class="el-dropdown-link">
							       <button class='task__options'><i class="fas fa-ellipsis-h"></i></button>
							     </span>
							     <el-dropdown-menu slot="dropdown">
									 
									 <el-dropdown-item v-if="page.type==4" :command="{id:page.id,type:5}">启动</el-dropdown-item>
							       <el-dropdown-item v-if="page.type==4" :command="{id:page.id,type:0}">编辑</el-dropdown-item>
							       <el-dropdown-item v-if="page.type!=4" :command="{id:page.id,type:1}">停止</el-dropdown-item>
							       <el-dropdown-item :command="{id:page.id,type:2}">删除</el-dropdown-item>
								   <el-dropdown-item :command="{id:page.id,type:3}">数据信息</el-dropdown-item>
							     </el-dropdown-menu>
							   </el-dropdown>
						 </div>
					  </div>
					  <p>{{page.title}}</p>
			          <div class='task__stats'>
			            <span><time datetime="2021-11-24T20:00:00"><i class="fas fa-flag"></i>Nov 24</time></span>
			            <span><i class="fas fa-comment"></i>3</span>
			            <span><i class="fas fa-paperclip"></i>7</span>
			            <span style="float: right;" @click.stop="vueQrShow(page)"><vue-qr :logoSrc="imageUrl" text="https://blog.csdn.net/weixin_42601136" :size="20"></vue-qr></span>
			          </div>
			        </div>
			      </div>
			    </div>
			  </main>
			  <aside class='task-details'>
			    <div class='tag-progress'>
			      <h2>进展</h2>
			      <div class='tag-progress'>
			        <p>使用中 <span>3/8</span></p>
			        <progress class="progress progress--copyright" max="8" value="3"> 3 </progress>
			      </div>
			      <div class='tag-progress'>
			        <p>未开始 <span>6/10</span></p>
			        <progress class="progress progress--illustration" max="10" value="6"> 6 </progress>
			      </div>
			      <div class='tag-progress'>
			        <p>已结束 <span>2/7</span></p>
			        <progress class="progress progress--design" max="7" value="2"> 2 </progress>
			      </div>
				  <div class='tag-progress'>
				    <p>编辑中 <span>2/7</span></p>
				    <progress class="progress progress--design" max="7" value="2"> 2 </progress>
				  </div>
			    </div>
			  </aside>
			</div>
		</div>
		<div>
			<el-dialog
			  title="提示"
			  :visible.sync="dialogVisible"
			  width="30%">
			  <edit ref="edit" :pageId="pageId"></edit>
			  <span slot="footer" class="dialog-footer">
			    <el-button @click="dialogVisible = false">取 消</el-button>
			    <el-button  type="primary" @click="save">保 存</el-button>
			  </span>
			</el-dialog>
			<el-dialog
			  title="提示"
			  :visible.sync="dialogVisibleAdd"
			  width="30%">
			  <add ref="add" ></add>
			  <span slot="footer" class="dialog-footer">
			    <el-button @click="dialogVisibleAdd = false">取 消</el-button>
			    <el-button  type="primary" @click="saveAdd">保 存</el-button>
			  </span>
			</el-dialog>
			<el-dialog
			  title="二维码展示"
			  :visible.sync="centerDialogVisible"
			  width="15%"
			  center>
			  <vue-qr   :ref="'Qrcode' + vueQrId" :text="vueQr.text" style="width: 100%;"></vue-qr><!-- :logoSrc="imageLogo" -->
			  <el-button @click="downloadImg">下载</el-button>
			</el-dialog>
		</div>
	</div>
</template>

<script>
	import pageApi from "@/api/system/page.js"
	import { getUser } from "@/utils/auth.js"
	import edit from "./edit.vue"
	import add from "./add.vue"
	import vueQr from 'vue-qr'
	export default {
		data() {
			return{
				centerDialogVisible: false,
				dialogVisibleAdd: false,
				dialogVisible: false,
				pageList:[],
				pageId:0,
				imageUrl:'',
				
				vueQrId:0,
				vueQr:{
					text:'',
					imageLogo:''
				}
			}
		},
		components:{
			edit,
			add,
			vueQr
		},
		created() {
			this.getPageList()
		},
		methods:{
			sss(){
				
			},
			vueQrShow(page){
				
				this.vueQrId=page.id
				this.vueQr.imageLogo=page.img
				this.vueQr.text=process.env.VUE_APP_WEB_API+"/#/survey/"+page.projectId+"/"+page.id
				this.centerDialogVisible=true
				console.log(this.vueQr.text)
			},
			save(){
				this.$refs.edit.save();
				this.getPageList()
				this.dialogVisible = false
			},
			saveAdd(){
				this.$refs.add.save();
				this.getPageList()
				this.dialogVisibleAdd = false
			},
			getPageList(){
				var data = {
					projectId:getUser().projectId
				}
				pageApi.list(data).then(res=>{
					this.pageList=res.list
				})
			},
			pageSkip(page){
				if(page.type==4){
					this.$router.push('/main/pc?pageId='+page.id)
				}else{
					this.$router.push('/association/'+page.id)
					//this.$router.push('/survey/'+getUser().projectId+'/'+page.id)
				}
			},
			//二维码下载
			downloadImg() {
				const iconUrl = this.$refs['Qrcode' + this.vueQrId].$el.src
				const a = document.createElement('a')
				const event = new MouseEvent('click')
				a.download = 'Qrcode' + this.vueQrId
				a.href = iconUrl
				a.dispatchEvent(event)
			},
			pageCommand(page){
				var pageId = page.id
				var type = page.type
				
				if(type==0){
					this.dialogVisible=true
					this.pageId=pageId
				}else if(type==1){
					this.$confirm('是否确定修改该页面的状态, 是否继续?', '提示', {
					  confirmButtonText: '确定',
					  cancelButtonText: '取消',
					  type: 'warning'
					}).then(() => {
						var data = {
							id:pageId,
							type:4
						}
						pageApi.edit(data).then(res=>{
							if(res.code==200){
								this.getPageList()
								this.$message({type: 'success',message: '操作成功!'});
							}
						})
					  
					}).catch(() => {
					  this.$message({type: 'info',message: '已取消操作'});          
					});
				}else if(type==2){
					this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
					  confirmButtonText: '确定',
					  cancelButtonText: '取消',
					  type: 'warning'
					}).then(() => {
					  var data = {
					  	id:pageId
					  }
					  pageApi.delete(data).then(res=>{
					  	if(res.code==200){
					  		this.getPageList()
					  		this.$message({type: 'success',message: '操作成功!'});
					  	}
					  })
					}).catch(() => {
					  this.$message({
					    type: 'info',
					    message: '已取消删除'
					  });          
					});
				}else if(type==5){
					var data = {
						id:pageId,
						type:1
					}
					pageApi.edit(data).then(res=>{
						if(res.code==200){
							this.getPageList()
							this.$message({type: 'success',message: '操作成功!'});
						}
					})
				}
				else{
					this.$router.push('excel?pageId='+page.id)
				}
				
			}
		}
	}
	document.addEventListener('DOMContentLoaded', (event) => {
	
	  var dragSrcEl = null;
	  
	  function handleDragStart(e) {
	    this.style.opacity = '0.1';
	    this.style.border = '3px dashed #c4cad3';
	    
	    dragSrcEl = this;
	
	    e.dataTransfer.effectAllowed = 'move';
	    e.dataTransfer.setData('text/html', this.innerHTML);
	  }
	
	  function handleDragOver(e) {
	    if (e.preventDefault) {
	      e.preventDefault();
	    }
	
	    e.dataTransfer.dropEffect = 'move';
	    
	    return false;
	  }
	
	  function handleDragEnter(e) {
	    this.classList.add('task-hover');
	  }
	
	  function handleDragLeave(e) {
	    this.classList.remove('task-hover');
	  }
	
	  function handleDrop(e) {
	    if (e.stopPropagation) {
	      e.stopPropagation(); // stops the browser from redirecting.
	    }
	    
	    if (dragSrcEl != this) {
	      dragSrcEl.innerHTML = this.innerHTML;
	      this.innerHTML = e.dataTransfer.getData('text/html');
	    }
	    
	    return false;
	  }
	
	  function handleDragEnd(e) {
	    this.style.opacity = '1';
	    this.style.border = 0;
	    
	    items.forEach(function (item) {
	      item.classList.remove('task-hover');
	    });
	  }
	  
	  
	  let items = document.querySelectorAll('.task'); 
	  items.forEach(function(item) {
	    item.addEventListener('dragstart', handleDragStart, false);
	    item.addEventListener('dragenter', handleDragEnter, false);
	    item.addEventListener('dragover', handleDragOver, false);
	    item.addEventListener('dragleave', handleDragLeave, false);
	    item.addEventListener('drop', handleDrop, false);
	    item.addEventListener('dragend', handleDragEnd, false);
	  });
	});
</script>

<style>
	.el-dropdown-menu__item {
	    list-style: none;
	    line-height: 26px;
	    padding: 0 20px;
	    margin: 0;
	    font-size: 14px;
	    color: #606266;
	    cursor: pointer;
	    outline: 0;
		border-radius: 10px;
	}
	:root {
	  --bg:#ebf0f7;
	  --header:#fbf4f6;
	  --text:#2e2e2f;
	  --white:#ffffff;
	  --light-grey:#c4cad3;
	  --tag-1:#ceecfd;
	  --tag-1-text:#2e87ba;
	  --tag-2:#d6ede2;
	  --tag-2-text:#13854e;
	  --tag-3:#ceecfd;
	  --tag-3-text:#2d86ba;
	  --tag-4:#f2dcf5;
	  --tag-4-text:#a734ba;
	  --purple:#7784ee;
	}
	
	* {
	  margin: 0;
	  padding: 0;
	  box-sizing: border-box;
	  font-family: "Poppins", sans-serif;
	}
	
	body {
	  color: var(--text);
	}
	
	.app {
	  background-color: var(--bg);
	  width: 100%;
	  min-height: 100vh;
	}
	
	h1 {
	  font-size: 30px;
	}
	
	.project {
	  padding: 2rem;
	  max-width: 75%;
	  width: 100%;
	  display: inline-block;
	}
	.project-info {
	  padding: 2rem 0;
	  display: flex;
	  width: 100%;
	  justify-content: space-between;
	  align-items: center;
	}
	.project-participants {
	  display: flex;
	  align-items: center;
	}
	.project-participants span, .project-participants__add {
	  width: 30px;
	  height: 30px;
	  display: inline-block;
	  background: var(--purple);
	  border-radius: 100rem;
	  margin: 0 0.2rem;
	}
	.project-participants__add {
	  background: transparent;
	  border: 1px dashed #969696;
	  font-size: 0;
	  cursor: pointer;
	  position: relative;
	}
	.project-participants__add:after {
	  content: "+";
	  font-size: 15px;
	  color: #969696;
	}
	.project-tasks {
	  display: grid;
	  grid-template-columns: repeat(4, 1fr);
	  width: 100%;
	  grid-column-gap: 1.5rem;
	}
	.project-column-heading {
	  margin-bottom: 1rem;
	  display: flex;
	  align-items: center;
	  justify-content: space-between;
	}
	.project-column-heading__title {
	  font-size: 20px;
	}
	.project-column-heading__options {
	  background: transparent;
	  color: var(--light-grey);
	  font-size: 18px;
	  border: 0;
	  cursor: pointer;
	}
	
	.task {
	  cursor: pointer;
	  background-color: var(--white);
	  padding: 1rem;
	  border-radius: 8px;
	  width: 100%;
	  box-shadow: rgba(99, 99, 99, 0.1) 0px 2px 8px 0px;
	  margin-bottom: 1rem;
	  border: 3px dashed transparent;
	}
	.task:hover {
	  box-shadow: rgba(99, 99, 99, 0.3) 0px 2px 8px 0px;
	  border-color: rgba(162, 179, 207, 0.2) !important;
	}
	.task p {
	  font-size: 15px;
	  margin: 1.2rem 0;
	}
	.task__tag {
	  border-radius: 100px;
	  padding: 2px 13px;
	  font-size: 12px;
	}
	.task__tag--editing {
	  color: #786eff;
	  background-color: #c8c4ff;
	}
	.task__tag--copyright {
	  color: var(--tag-4-text);
	  background-color: var(--tag-4);
	}
	.task__tag--design {
	  color: var(--tag-3-text);
	  background-color: var(--tag-3);
	}
	.task__tag--illustration {
	  color: var(--tag-2-text);
	  background-color: var(--tag-2);
	}
	.task__tags {
	  width: 100%;
	  display: flex;
	  align-items: center;
	  justify-content: space-between;
	}
	.task__options {
	  background: transparent;
	  border: 0;
	  color: var(--light-grey);
	  font-size: 17px;
	}
	.task__stats {
	  position: relative;
	  width: 100%;
	  color: var(--light-grey);
	  font-size: 12px;
	}
	.task__stats span:not(:last-of-type) {
	  margin-right: 1rem;
	}
	.task__stats svg {
	  margin-right: 5px;
	}
	.task__owner {
	  width: 25px;
	  height: 25px;
	  border-radius: 100rem;
	  background: var(--purple);
	  position: absolute;
	  display: inline-block;
	  right: 0;
	  bottom: 0;
	}
	
	.task-hover {
	  border: 3px dashed var(--light-grey) !important;
	}
	
	.task-details {
	  width: 24%;
	  border-left: 1px solid #d9e0e9;
	  display: inline-block;
	  height: 100%;
	  vertical-align: top;
	  padding: 3rem 2rem;
	}
	
	.tag-progress {
	  margin: 1.5rem 0;
	}
	.tag-progress h2 {
	  font-size: 16px;
	  margin-bottom: 1rem;
	}
	.tag-progress p {
	  display: flex;
	  width: 100%;
	  justify-content: space-between;
	}
	.tag-progress p span {
	  color: #b4b4b4;
	}
	.tag-progress .progress {
	  width: 100%;
	  -webkit-appearance: none;
	  -moz-appearance: none;
	       appearance: none;
	  border: none;
	  border-radius: 10px;
	  height: 10px;
	}
	.tag-progress .progress::-webkit-progress-bar, .tag-progress .progress::-webkit-progress-value {
	  border-radius: 10px;
	}
	.tag-progress .progress--copyright::-webkit-progress-bar {
	  background-color: #ecd8e6;
	}
	.tag-progress .progress--copyright::-webkit-progress-value {
	  background: #d459e8;
	}
	.tag-progress .progress--illustration::-webkit-progress-bar {
	  background-color: #dee7e3;
	}
	.tag-progress .progress--illustration::-webkit-progress-value {
	  background-color: #46bd84;
	}
	.tag-progress .progress--design::-webkit-progress-bar {
	  background-color: #d8e7f4;
	}
	.tag-progress .progress--design::-webkit-progress-value {
	  background-color: #08a0f7;
	}
	
	.task-activity h2 {
	  font-size: 16px;
	  margin-bottom: 1rem;
	}
	.task-activity li {
	  list-style: none;
	  margin: 1rem 0;
	  padding: 0rem 1rem 1rem 3rem;
	  position: relative;
	}
	.task-activity time {
	  display: block;
	  color: var(--light-grey);
	}
	
	.task-icon {
	  width: 30px;
	  height: 30px;
	  border-radius: 100rem;
	  position: absolute;
	  top: 0;
	  left: 0;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	}
	.task-icon svg {
	  font-size: 12px;
	  color: var(--white);
	}
	.task-icon--attachment {
	  background-color: #fba63c;
	}
	.task-icon--comment {
	  background-color: #5dc983;
	}
	.task-icon--edit {
	  background-color: #7784ee;
	}
	
	@media only screen and (max-width: 1300px) {
	  .project {
	    max-width: 100%;
	  }
	
	  .task-details {
	    width: 100%;
	    display: flex;
	  }
	
	  .tag-progress,
	.task-activity {
	    flex-basis: 50%;
	    background: var(--white);
	    padding: 1rem;
	    border-radius: 8px;
	    margin: 1rem;
	  }
	}
	@media only screen and (max-width: 1000px) {
	  .project-column:nth-child(2),
	.project-column:nth-child(3) {
	    display: none;
	  }
	
	  .project-tasks {
	    grid-template-columns: 1fr 1fr;
	  }
	}
	@media only screen and (max-width: 600px) {
	  .project-column:nth-child(4) {
	    display: none;
	  }
	
	  .project-tasks {
	    grid-template-columns: 1fr;
	  }
	
	  .task-details {
	    flex-wrap: wrap;
	    padding: 3rem 1rem;
	  }
	
	  .tag-progress,
	.task-activity {
	    flex-basis: 100%;
	  }
	
	  h1 {
	    font-size: 25px;
	  }
	}
</style>
